<template>
    <div class="yousport-person-homepage">

        <div class="page-navbar">
            <ysHomePageHeader :backgroundImg="frontCover" :avatar="avatar" isMyHomePage=true :name="name" :dept="depName"></ysHomePageHeader>
            <ysChart :labels="labels" :data="data" :showTip="showTip" :step="step" :memberId="memberId" :rank="rank"></ysChart>
            <div class="yousport-star-wrapper">
            	<i class="iconfont icon-heart"></i><span class="yousport-start-count">{{praiseCount}}</span>
            </div>
        </div>

    </div>
</template>

<script>
    import ysHomePageHeader from '../component/ys-homepageheader.vue'
    import ysChart from '../component/ys-chart.vue'
	import config from '../assets/config.js'
	import util from '../assets/util'
    import bridge from '../bridge'

    export default {

        data() {
            return {
            	avatar: "",
            	frontCover:{
                    backgroundImage:''
                },
            	praiseCount: 0,
            	memberId:'',
                name:"",
                labels:[],
                data:[],
                step:0,
                showTip:'今日步数',
                depName:'',
                rank:0
            };
        },
        activated() {
        	this.initData();
        	this.initChart();
            this.initHeader();
        },
        methods:{
        	initData() {
        		var res = util.session.get('rowData');
                var myFrontUpdate = util.session.get('my-front-update');
        		if(res.depName) {
                    this.depName = res.depName;
                }
        		if (res.avatar) {
        		    this.avatar = res.avatar;
        		}
                //个人更新了背景图
                if(myFrontUpdate) {
                    this.frontCover = {
                        backgroundImage:'url('+ myFrontUpdate +')'
                    }
                } else if(res.frontCover) {
        		    this.frontCover = {
        		    	backgroundImage:'url('+ res.frontCover +')'
        		    }
        		} else {
                    this.frontCover = {
                        backgroundImage:''
                    }
                }
        		if (res.stepCount) {
        		    this.step = res.stepCount; 
        		}
        		if (res.upVote) {
        		    if(res.upVote > 9999){
        		        this.praiseCount = 9999 + "+";
        		    }else {
        		        this.praiseCount = res.upVote;
        		    }
        		}
        		if (res.memberId) {
        		    this.memberId = res.memberId;
        		}
        		if (res.name) {
        		    this.name = res.name;
        		}
        	},
            initHeader() {
                let me = this;
                bridge.client.configNavBar(function () {

                }, {centerItems:[{title:me.name + '的主页'}],rightItems:[] });
            },

             initChart() {
                let me = this;
                this.$http.get(config.host+config.getSevenDayPerStep, {
                    params:{
                        memberId:this.memberId
                    }
                }).then((res)=> {
                    this.step = res.data.today.stepCount;
                    let labels = [];
                    let stepData = [];
                    let list = res.data.list;
                    if(list.length) {
                        list.forEach((item, index)=> {
                            let date = new Date(item.createTime);
                            if(index + 1 === list.length){
                                labels.push(date.getMonth() + 1 + '月' + date.getDate());
                            } else {
                                labels.push(date.getDate());
                            }
                            stepData.push(item.stepCount);

                        })
                        me.labels = labels.reverse();
                        me.data = stepData.reverse();
                        me.rank = res.data.today.rowno;

                    }

                })
            },
        },
        components:{
           	ysHomePageHeader, ysChart
        }
    };
</script>

<style>
	.yousport-person-homepage {
	    width: 100%;
	    height: 100%;
	    background: #F5F5F5;
	    text-align: center;
	}
	.ys-chart {
		margin-top: 17px;
	}
    .yousport-star-wrapper {
    	width: 100px;
    	height: 45px;
    	border-radius: 22px;
    	color: #CCCCCC;
    	background-color: #FFFFFF;
    	margin-top: 15px;
    	display: inline-block;
    	line-height: 45px;
    	box-shadow: 0px 2px 10px #e2e2e2;
    }
    .icon-heart {
    	font-size: 24px;
    	vertical-align: middle;
    }
    .yousport-start-count {
    	font-size: 14px;
    	margin-left: 8px;
    }
    .mint-actionsheet-list {
    	margin-bottom: 10px !important;;
    }
    .mint-actionsheet-listitem {
    	color: #292F33;
    	font-size: 16px;
    	height: 50px;
    	line-height: 50px;
    	border-bottom: solid 1px #EDEDED;
    }
    .mint-actionsheet {
    	background-color: #F7F7F7;

    }
    .mint-actionsheet-button {
		color: #292F33;
    	font-size: 16px;
    	height: 50px;
    	line-height: 50px;
    }
</style>
